<template>
  <div class="descriptions">
    <el-descriptions
      title="带边框列表"
      
      :column="2"
      border
      :labelStyle="LS"
      :contentStyle="CS"
    >
    <!-- 垂直列表 -->
    <!-- direction="vertical" -->
      <el-descriptions-item label="用户名" label-class-name="my-label" content-class-name="my-content" :span="1">kooriookami</el-descriptions-item>
      <el-descriptions-item label="手机号" :span="1">18100000000</el-descriptions-item>
      <el-descriptions-item label="居住地" :span="2">苏州市</el-descriptions-item>
      <el-descriptions-item label="备注" :span="2">
        <el-tag size="small">学校</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="联系地址" :span="2">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
export default {
    data(){
        return {
            LS:{
                "word-break":"break-all",
                "background": "#cffeff",
            },
            CS:{
                "word-break":"break-all"
            }
        }
    }
};
</script>

<style scope>
    .my-label{
        background: #cffeff;
    }
    .my-content{
        background: #66cca2 !important;
        
    }
</style>
